<template>
  <div class="content-wrapper">
    
    <div class="search-header" style="margin-top: 0rpx;">
      <i-row>
        <i-col offset="2" span="17">
          <i-input maxlength="20" i-class="search-input" @change="searchBind" placeholder="规则名称或ID" />
        </i-col>
        <i-col offset="1" span="2">
          <i-icon @click='fetchList' type="search" size="28" color="#1EB4C5" />
        </i-col>
      </i-row>
    </div>

    <scroll-view class="product-list" scroll-y @scrolltolower="loadList">
      <div class="scroll-content" v-for="rule in ruleList" :key="rule.ID">
        <i-cell title-class="cell-title" :title="rule.RuleName" only-tap-footer>
          <div class="product-content" style="display: block;">
            <span class='product-info' style="width: 340rpx;">
              <p class='info-tag' style="width: 120rpx;">规则ID：</p>
              <p class='info-content'>{{ rule.ID }}</p>
            </span>
            <span class='product-info' style="width: 340rpx">
              <p class='info-tag' style="width: 180rpx;">数据流名称：</p>
              <p class='info-content' style="color: #999;">{{ rule.StreamName }}</p>
            </span>
            <span class='product-info' style="width: 340rpx;">
              <p class='info-tag'>规则类型：</p>
              <p class='info-content' style="color: #999;">{{ rule.RuleType }}</p>
            </span>
            <span class='product-info' style="width: 340rpx;">
              <p class='info-tag'>规则阈值：</p>
              <p class='info-content' style="color: #999;">{{ rule.Threshold }}</p>
            </span>
            <span class='product-info' style="width: 340rpx;">
              <p class='info-tag'>动作方式：</p>
              <p class='info-content' style="color: #999;">{{ rule.ActionType }}</p>
            </span>
            <span class='product-info' style="width: 340rpx;">
              <p class='info-tag'>规则描述：</p>
              <p class='info-content' style="color: #999;">{{ rule.Describe }}</p>
            </span>
          </div>
        </i-cell>
      </div>

      <i-load-more v-if='loadSpin' />

      <i-divider content="暂无其他数据" v-if='nomore'></i-divider>

    </scroll-view>
    
    <i-message id="message" />

  </div>
</template>

<script>

import store from '../store/store'
import { request } from '@/utils/index'

import { transRuleType, transActionType } from '@/utils/dict'

const { $Message } = require('../../../static/dist/base/index')

export default {
  components: {},

  data () {
    return {
      productID: 0,
      nomore: false,
      loading: false,
      loadSpin: false,
      searchInput: '',
      pageSize: 5,
      currentPage: 1,
      totalNum: 0,
      ruleList: []
    }
  },
  onLoad (options) {
    this.productID = options.productID
    this.fetchList()
  },
  methods: {
    fetchList () {
      this.nomore = false
      this.currentPage = 1

      var target = `/api/v1/rule/list?pid=${this.productID}&offset=${this.currentPage - 1}&limit=${this.pageSize}`
      if (this.searchInput !== '') {
        target += `&search=${this.searchInput}`
      }
      request(target, { token: this.token }, 'GET').then((ids) => {
        if (ids.code !== 200) {
          $Message({ content: '请求错误，请重试', type: 'error' })
          return false
        }
        this.ruleList = this.dataProcess(ids.data.row)
        this.totalNum = ids.data.total
        if (this.totalNum < this.pageSize) {
          this.nomore = true
        }
      }, (e) => {
        $Message({ content: '请求错误，请重试', type: 'error' })
        return false
      })
    },
    loadList () {
      if (this.pageSize * this.currentPage <= this.totalNum) {
        this.loadSpin = true
        this.currentPage += 1
        var target = `/api/v1/rule/list?pid=${this.productID}&offset=${this.currentPage - 1}&limit=${this.pageSize}`
        if (this.searchInput !== '') {
          target += `&search=${this.searchInput}`
        }
        request(target, { token: this.token }, 'GET').then((ids) => {
          if (ids.code !== 200) {
            $Message({ content: '请求错误，请重试', type: 'error' })
            return false
          }
          var self = this
          setTimeout(function () {
            self.ruleList = self.ruleList.concat(this.dataProcess(ids.data.row))
            self.totalNum = ids.data.total
            self.loadSpin = false
            if (ids.data.row.length === 0) {
              self.nomore = true
            }
          }, 700)
        }, (e) => {
          $Message({ content: '请求错误，请重试', type: 'error' })
          return false
        })
      }
    },
    dataProcess (row) {
      var data = row
      for (var i = data.length - 1; i >= 0; i--) {
        data[i].RuleType = transRuleType(data[i].Type)
        data[i].ActionType = transActionType(data[i].Action)
      }
      return data
    },
    searchBind (e) {
      this.searchInput = e.mp.detail.detail.value
    }
  },
  computed: {
    token () {
      return store.state.token
    }
  }
}
</script>

<style>

</style>